<template>
  <div class="detail-page" ref="detail_page">
    <div class="detail-scroll">
      <div class="detail-contain" v-if="desc">
        <div class="detail-wrapper" v-show="desc">
          <div class="return-home" @click.stop.prevent="recentHome">
            <van-icon name="arrow-left" />
          </div>
          <swiper :imgList="desc.relation_picture" v-if="desc.relation_picture"></swiper>
          <div class="pro-info">
            <div class="textures">
              <div class="box">
                <h2>{{desc.subtitle}}</h2>
                <div class="title">
                  <span class="title-product">{{desc.title}}</span>
                </div>
                <div class="price-box">
                  <p>
                    <span class="rmb">¥</span>
                    <span class="price-product ">{{desc.price}}</span>
                  </p>
                  <p>
                    <span class="sale-num ">已售{{desc.sell}}份</span>
                  </p>
                </div>
                <div class="product-news">
                  <p class="product-model product-mess">
                    产地
                    <span>{{desc.location}}</span>
                  </p>
                  <p class="product-model sale-volume">
                    <span class="information-details ">1小时达</span>
                  </p>
                  <p class="product-model product-message">
                    <span class="tag ">实付满39包邮</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="graphic-details">
            <h4>商品详情</h4>
            <div class="content-detail">
              <div class="detail-item">规格:
                <span class="detail-info">{{desc.specification}}</span>
              </div>
              <div class="detail-item">重量:
                <span class="detail-info">{{desc.weight}}</span>
              </div>
              <div class="detail-item">包装:
                <span class="detail-info">{{desc.package}}</span>
              </div>
              <div class="detail-item">保质期:
                <span class="detail-info">{{desc.validity}}</span>
              </div>
              <div class="detail-item">贮存方法:
                <span class="detail-info">{{desc.storage}}</span>
              </div>
            </div>
            <div class="detailImg" v-if="desc.content">
              <!-- <ul class="detail-box">
                <li class="detail-img" v-for="(item,index) in desc.descImg" :key="index">
                  <img :src="item" v-lazy="item" class="picture-img" alt="">
                </li>
              </ul> -->
              {{desc.content}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="detail-footer">
      <div class="shopping-icon" @click.stop.prevent="showCart()">
        <span class="cart-info" v-if="subCount>0">{{subCount}}</span>
      </div>
      <div class="shopping-btn">
        <van-button type="primary" @click.stop.prevent="addCart" class="add-cart" bottom-action>加入购物车</van-button>
      </div>
    </footer>
    <cart-control v-show="false" ref="cart_box" :id="id" :good='good'></cart-control>
  </div>
</template>

<script>
  import Vue from 'vue'
  import BScroll from 'better-scroll'
  import store from '@/store/store'
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  import {
    Button,
    Lazyload,
    Icon,
    Toast
  } from 'vant'
  import Swiper from '#/swiper/swiper'
  import cartControl from '#/cartcontrol/cartcontrol'
  import {
    CODE,
    APIURI
  } from '#/common/js/apiConst'
  Vue.use(Button)
    .use(Lazyload)
    .use(Icon)

  export default {
    store,
    data: () => {
      return {
        id: '',
        desc: '',
        divideImg: '',
        good: {}
      }
    },
    created() {
      this.getDetail()
    },
    components: {
      Swiper,
      cartControl
    },
    computed: {
      ...mapState(['subCount', 'carGoods'])
    },
    methods: {
      ...mapMutations(['addGoods', 'delGoods']),
      ...mapActions(['addsubCount', 'reducesubCount']),
      showCart() {
        this.$router.push({
          path: '/shopcar'
        })
      },
      recentHome() {
        history.back()
      },
      getDetail() {
        this.getId()
        if (this.id) {
          this._initGoods(this.id)
          this.$axios
            .get(APIURI + '/product/show/' + this.id)
            .then(res => {
              res = res.data
              if (res.code === CODE) {
                this.desc = res.data
                // console.log(this.desc)
                // DOM更新后
                this.$nextTick(() => {
                  this._initScroll()
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
        }
      },
      getId() {
        this.id = this.$route.query.id
      },
      addCart(event) {
        // console.log(this.$refs.cart_box.changeCount(this.good))

        if (!this.good.quantity) {
          this.$axios
            .get(APIURI + '/cart/add/' + this.good.id)
            .then(res => {
              res = res.data
              if (res.code === CODE) {
                if (!this.good.quantity) {
                  Vue.set(this.good, 'quantity', 1)
                  this.addGoods(this.good)
                }
              } else {
                Toast(res.msg)
              }
            })
            .catch(function(err) {
              console.log(err)
            })
        } else {
          this.$axios
            .get(APIURI + '/cart/update/' + this.good.id)
            .then(res => {
              res = res.data
              if (res.code === CODE) {
                this.good.quantity = this.carGoods[this.good.id]
                this.good.quantity++
                this.addGoods(this.good)
              } else {
                Toast(res.msg)
              }
            })
            .catch(function(err) {
              console.log(err)
            })
        }
      },
      _initGoods(id) {
        this.good.id = id
        if (this.carGoods[id]) {
          this.good.quantity = this.carGoods[id]
        } else {
          this.good.quantity = 0
        }
      },
      _initScroll() {
        if (!this.goodsScroll) {
          this.goodsScroll = new BScroll(this.$refs.detail_page, {
            probeType: 3,
            scrollY: true,
            click: true
          })
        } else {
          this.goodsScroll.refresh()
        }
      }
    },
    watch: {
      $route: 'getDetail'
    }
  }
</script>

<style lang="scss" scoped>
  @import './../common/scss/common.scss';
  .detail-page {
    background: $white;
    box-sizing: border-box;
    overflow: hidden;
    height: 100vh;
    .detail-wrapper {
      position: relative;
      background-color: $white;
      padding-bottom: 50px;
      .return-home {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 1000;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        @include allCFlex();
        background-color: rgba(0, 0, 0, 0.3);
        color: $white;
      }
      .pro-info {
        .box {
          padding: 0 15px;
          h2 {
            margin: 0;
            padding-top: 20px;
            padding-bottom: 2px;
            line-height: 28px;
            font-size: 20px;
            color: #474245;
            font-weight: 700;
          }
          .title {
            margin-bottom: 14px;
            .title-product {
              font-size: 16px;
              color: #474245;
              font-weight: 400;
            }
          }
          .price-box {
            @include spaceBetweenCenter();
            color: #ff4891;
            font-size: 21px;
            line-height: 20px;
            p {
              margin: 0;
            }
            .rmb {
              font-size: 12px;
              letter-spacing: -4px;
            }
            .sale-num {
              color: #969696;
              font-size: 12px;
              float: right;
            }
          }
          .product-news {
            @include spaceBetweenCenter();
            .product-model {
              display: inline-block;
              line-height: 40px;
              margin: 0;
              font-size: 12px;
              color: #262626;
              border-top: none;
              &::before {
                content: '';
                display: inline-block;
                width: 3px;
                height: 3px;
                background-color: #262626;
                border-radius: 50%;
                vertical-align: middle;
                margin-right: 2px;
              }
            }
          }
        }
      }
      .graphic-details {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 20px 10px;
        h4 {
          margin: 0;
          font-size: 16px;
          margin-bottom: 16px;
          font-weight: 500;
        }
        .detail-item {
          line-height: 40px;
          font-size: 14px;
          color: #969696;
        }
        .picture-img {
          width: 100%;
          display: block;
        }
        .detailImg {
          color: #474245;
          font-size: 14px;
        }
      }
    }
    .detail-footer {
      position: fixed;
      left: 0;
      bottom: 0;
      @include spaceBetweenCenter();
      width: 100%;
      height: 46px;
      background: $white;
      border-top: 1px solid #e3e3e5;
      .shopping-icon {
        box-sizing: border-box;
        padding: 0 11px 0 19px;
        background: url(https://static-as.missfresh.cn/frontend/img/shop-icon.png) center no-repeat;
        background-size: 22px 22px;
        display: block;
        color: #fff;
        width: 54px;
        flex-basis: 54px;
        height: 100%;
        .cart-info {
          position: absolute;
          background: #ff4891;
          padding: 0 3px;
          border-radius: 20px;
          top: 4px;
          left: 30px;
          font-size: 12px;
          min-width: 20px;
          text-align: center;
          box-sizing: border-box;
          min-height: 20px;
          @include allCFlex();
          vertical-align: middle;
        }
      }
      .shopping-btn {
        flex: 1;
        .add-cart {
          background: #ff4891;
          @include allCFlex();
        }
      }
    }
  }
</style>